<template>
  <div class="app-container">
    <div class="head-container">
      <div>
        <el-input
          v-model="params.nickName"
          clearable
          size="small"
          placeholder="钱包昵称"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="search"
        />
        状态:
        <el-select
          v-model="params.orderStatus"
          clearable
          size="small"
          style="width: 120px"
          class="filter-item"

        >
          <el-option
            v-for="(key, value) in {
              4: '完全成交',
              2: '部分成交',
              1: '未成交',
              3: '撤单',
            }"
            :key="key"
            :label="key"
            :value="value"
          />
        </el-select>
        方向:
        <el-select
          v-model="params.side"
          clearable
          size="small"
          style="width: 120px"
          class="filter-item"

        >
          <el-option
            v-for="(key, value) in {
              2: '买',
              1: '卖',
            }"
            :key="key"
            :label="key"
            :value="value"
          />
        </el-select>
        类型:
        <el-select
          v-model="params.t"
          clearable
          size="small"
          style="width: 120px"
          class="filter-item"

        >
          <el-option
            v-for="(key, value) in {
              1: '限价',
              2: '市价',

            }"
            :key="key"
            :label="key"
            :value="value"
          />
        </el-select>
        <el-date-picker
          v-model="params.orderdate"
          clearable
          type="datetimerange"
          size="small"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          class="filter-item"
          range-separator="~"
          style="width: 380px"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
        <!-- <el-select
          v-model="params.market"
          clearable
          size="small"
          style="width: 180px"
          class="filter-item"
          placeholder="交易对"
        >
          <el-option
            v-for="item in options"
            :key="item.coinMarketCode"
            :label="item.coinMarketCode"
            :value="item.coinMarketCode"
          />
        </el-select> -->

        <el-button
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-search"
          @click="search"
        >搜索</el-button
        >
        <el-button
          class="filter-item"
          size="mini"
          type="warning"
          icon="el-icon-refresh-left"
          @click="resetList"
        >重置</el-button
        >
        <!-- <el-button
          v-permission="permission.export"
          type="primary"
          class="filter-item"
          size="mini"
          @click="downloadFile"
          >导出</el-button
        > -->
        <!-- v-permission="permission.export" -->
        <el-button type="primary" class="filter-item" size="mini" @click="duduxia">数据导出</el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="loading"
      :data="cruddata"
      style="width: 100%"
    >
      <el-table-column type="index" />
      <el-table-column
        prop="nickName"
        :show-overflow-tooltip="true"
        label="钱包昵称"
      />
      <el-table-column :show-overflow-tooltip="true" prop="status" label="状态">
        <template slot-scope="scope">

          <!-- TODO: 王瑶代为改动次处  有问题找沈超 -->
          <div>
            {{ { 0: "初始化", 1: "未成交", 2: "部分成交", 3: "撤单" ,4:"完全成交" }[scope.row.status] }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="createAt"
        label="创建时间"
      >
        <template slot-scope="scope">
          <div>
            {{
              scope.row.createAt
                ? $moment(scope.row.createAt).format("YYYY-MM-DD HH:mm:ss")
                : null
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="updateAt"
        label="完成时间"
      >
        <template slot-scope="scope">
          <div>
            {{
              scope.row.updateAt
                ? $moment(scope.row.updateAt).format("YYYY-MM-DD HH:mm:ss")
                : null
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="t" label="类型">
        <template slot-scope="scope">
          <div>
            {{ { 1: "限价", 2: "市价" }[scope.row.t] }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="交易对">
        <template slot-scope="scope">
          <div>{{ scope.row.coinName }} / {{ scope.row.baseCoinName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="side" :show-overflow-tooltip="true" label="方向">
        <template slot-scope="scope">
          <div>
            {{ { 1: "卖", 2: "买" }[scope.row.side] }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        :show-overflow-tooltip="true"
        label="价格"
      />
      <el-table-column prop="amount" label="委托量" />
      <el-table-column prop="dealMoney" label="成交额" />
      <!-- <el-table-column
        prop="deal_fee"
        :show-overflow-tooltip="true"
        label="手续费"
      /> -->
      <!-- <el-table-column label="操作" width="120px" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-permission="permission.view"
            size="mini"
            type="text"
            @click="goDetail(scope.row)"
          >查看详情</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <!--分页组件-->
    <pagination
      :total="total"
      :page="params.page"
      :limit="params.size"
      @pagination="pagination"
    />
  </div>
</template>

<script>
import pagination from '@/components/Pagination'
import { getOrderList, getMarketList } from '@/api/currcoin'

export default {
  name: 'Customer',
  components: { pagination },
  data() {
    return {
      params: {
        page: 1,
        size: 10,
        nickName: null,
        orderdate: null,
        orderStatus: null,
        side: null,
        t: null
      },
      params11: {
        nickName: null,
        orderStatus: null,
        side: null,
        t: null
      },

      permission: {
        export: ['admin', 'Customer:export'],
        add: ['admin'],
        edit: ['admin'],
        del: ['admin']
      },
      cruddata: [],
      total: 0,
      loading: false,
      options: [],
      timeRange: '',
      pickerDisabled: {
        disabledDate: (time) => {
          return time.getTime() > new Date().getTime()
        }
      }
    }
  },
  created() {
    // getMarketList({
    //   page: 1,
    //   size: 100
    // }).then((res) => {
    //   console.log(res.data)
    //   if (res.code == 0) {
    //     this.options = res.records
    //   } else {
    //     this.$message.error(res.message)
    //   }
    // })
    this.getList()
  },
  methods: {
    duduxia() {
      const params = {
        ...this.params
      }
      params.page = null
      params.size = null

      this.$duduxia({ ...params }, '/admin/bok/user/outC2cOrderList', '订单列表')
    },
    goDetail(data) {
      this.$router.push({
        path: '/contract/indexlist/entrustorderDetail',
        query: {
          id: data.dorderId
        }
      })
    },
    pagination(data) {
      this.params.page = data.page
      this.params.size = data.limit
      this.getList()
    },
    search() {
      this.params.page = 1
      this.getList()
    },

    getList() {
      console.log(this.params.orderdate)
      if (this.params.orderdate) {
        this.params.startAt = this.params.orderdate[0]
        this.params.endAt = this.params.orderdate[1]
      } else {
        this.params.startAt = null
        this.params.endAt = null
      }

      this.loading = true

      for (const key in this.params) {
        this.params[key] == '' ? this.params[key] = null : this.params[key]
      }
      getOrderList(this.params).then((res) => {
        if (res.code == 0) {
          this.cruddata = res.data.records
          this.total = +res.data.total
        } else {
          this.$message.error(res.message)
        }

        setTimeout(() => {
          this.loading = false
        }, 1000)
      })
    },
    resetList() {
      this.params = {
        page: 1,
        size: 10,
        nickName: null,
        endDate: null,
        startDate: null
      }
      this.timeRange = null
      this.getList()
    },
    /**
     * 日期时间控件选择
     */
    datePickerChange1(e) {
      this.params.startDate = e ? e[0] : ''
      this.params.endDate = e ? e[1] : ''
      // this.params.startDate = e ? e[0] / 1000 : "";
      // this.params.endDate = e ? e[1] / 1000 : "";
    }
  }
}
</script>
